<template>
    <el-menu
      class="manageritems"
      default-active="0"
      @select="handleSelect"
      active-text-color="red">

      <el-menu-item index="0">
          <i class="el-icon-menu"></i>
          <span slot="title">用户信息管理</span>
      </el-menu-item>
      <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">图书类型管理</span>
      </el-menu-item>
      <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">图书信息管理</span>
      </el-menu-item>
      
      <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title">图书借还管理</span>
      </el-menu-item>
      <el-menu-item index="4">
          <i class="el-icon-menu"></i>
          <span slot="title">图书检索</span>
      </el-menu-item>

    </el-menu>
  </template>
  
  <script>
    export default {
      name: 'SideMenu',
      data () {
        return {
          cid: ''
        }
      },
      methods: {
        handleSelect (key) {//, keyPath
          this.cid = key
          this.$emit('indexSelect')
        }
      }
    }
  </script>
  
  <style scoped>
    .manageritems {
      position:relative;
      margin-left: 0px;
      left: 0px;
      top: 0px;
      width: 99%;    
      background-color:rgb(191, 191, 252);
    }
  </style>